<template>
    <div class="page-comment">
        <div class="score-wrap">
            <img :src="detail ? detail.cover : ''" class="avatar" />
            <span class="score-label">评分</span>
            <div class="score-list">
                <span class="icon" @click="onClickScore(1)">{{score > 0 ? '&#xe67b;' : '&#xe686;'}}</span>
                <span class="icon" @click="onClickScore(2)">{{score > 1 ? '&#xe67b;' : '&#xe686;'}}</span>
                <span class="icon" @click="onClickScore(3)">{{score > 2 ? '&#xe67b;' : '&#xe686;'}}</span>
                <span class="icon" @click="onClickScore(4)">{{score > 3 ? '&#xe67b;' : '&#xe686;'}}</span>
                <span class="icon" @click="onClickScore(5)">{{score > 4 ? '&#xe67b;' : '&#xe686;'}}</span>
            </div>
        </div>

        <div class="textarea-wrap">
            <textarea v-model="content" class="textarea" cols="30" rows="10" max-length="500" placeholder="点击输入对于商品的看法"></textarea>
            <div class="textarea-length">{{content.length}}/500</div>
        </div>

        <Uploader v-model="images" />

        <div class="btn-wrap">
            <div class="btn btn-mobile btn-red btn-large btn-block" :class="{ 'disabled': detail.is_comment || requesting }" @click="onClickSubmit">
                {{detail.is_comment ? '已评价' : '提交'}}
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import store from '@/store';
import Uploader from '@/components/uploader/uploader.vue';
import { Component, Vue } from 'vue-property-decorator';
import { Route } from 'vue-router';

Component.registerHooks([
    'beforeRouteEnter',
]);

@Component({
    name: 'MallComment',
    components: {
        Uploader,
    },
})
export default class MallComment extends Vue {
    /** 评分 */
    public score: any = 5;

    /** 评价内容 */
    public content = '';

    /** 图片内容 */
    public images: any = [];

    public requesting = false;

    /** 订单id */
    public get orderId() {
        return this.$route.params.orderId;
    };
    /** 订单详情 */
    public get detailMap() {
        return store.state.order.detail;
    }
    /** 订单详情 */
    public get detail() {
        return this.detailMap[this.orderId] || null;
    }

    /**
     * 点击分数
     */
    public onClickScore(score: any) {
        this.score = score;
    }
    /**
     * 点击提交
     */
    public async onClickSubmit() {
        if(this.content.replace(/\s*/g,"").length > 0){
            if (this.requesting || this.detail.is_comment) {
                return;
            }
            this.requesting = true;
            wx.showLoading({
                title: '开始上传',
                mask: true,
            });
            const uploadRes = await Promise.all(this.images.map((image: any) => store.dispatch('framework/upload', {
                filePath: image,
                type: 'comment',
            })));
            const res = await store.dispatch('order/comment', {
                orderId: this.orderId,
                productId: this.detail.link_id,
                score: this.score,
                content: this.content,
                images: uploadRes.map((res: any) => JSON.parse(res.data).data.key),
            });
            this.requesting = false;
            if (res.statusCode === 200 && res.data.status === 0) {
                await Promise.all([
                    store.dispatch('order/getList', {
                        status: 'all',
                        offset: 0,
                        count: 10,
                        forceUpdate: true,
                    }),
                    store.dispatch('order/getList', {
                        status: 'need_comment',
                        offset: 0,
                        count: 10,
                        forceUpdate: true,
                    }),
                    store.dispatch('order/getList', {
                        status: 'evaluate',
                        offset: 0,
                        count: 10,
                        forceUpdate: true,
                    }),

                ]);
                wx.showToast({
                    title: '提交成功',
                });
                wx.navigateBack();
            } else {
                wx.showToast({
                    title: res.data.message,
                    icon: 'none',
                });
            }
        }else{
            wx.showToast({
                title: '评价不能为空',
                icon: 'none',
            });
        }
        
    }

    public async beforeRouteEnter(to: Route, from: Route, next: any) {
        const orderId = to.params.orderId;
        await store.dispatch('order/getDetail', {
            orderId,
        });
        next();
    }
}
</script>
<style lang="less">

@import "../../lib/style/mixins.less";

.page-comment {
    .score-wrap {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 15px 15px 7px;
        .avatar {
            width: 60px;
            height: 60px;
            border-radius: 7px;
        }
        .score-label {
            display: inline-block;
            padding: 0 10px;
            .text-normal();
            color: @color-font-2;
        }
        .score-list {
            flex: 1;
            .icon {
                padding-right: 3px;
                font-size: 24px;
                color: @orange-gold-color;
            }
        }
    }
    .textarea-wrap {
        padding: 7px 15px;
        .textarea {
            width: 100%;
        }
        .textarea-length {
            color: @color-font-3;
            text-align: right;
        }
    }
    .btn-wrap {
        padding: 7px 15px;
    }
}

</style>
